<template>
    <DialogCom :draggable="true" :title="title" :width="'347'" :visible="isVisible" @close="close" @confirm="confirm">
        <template v-slot:content>
            <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="名称">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="最大级别" prop="maximumLevel" v-if="props.type == 'imagery'">
                    <el-input v-model="formData.maximumLevel" />
                </el-form-item>
                <el-form-item label="服务地址" prop="url" >
                    <el-input v-model="formData.url" />
                </el-form-item>
                <el-form-item :label="formData.isShowTk" prop="tokenValue"  v-if="props.type == 'imagery' && formData.isShowTk.length > 1">
                    <el-input v-model="formData.tokenValue" />
                </el-form-item>
                    <div class="images_img_list" v-if="props.type == 'imagery'">
                        <div v-for="(item, index) in imagelist" class="images_img_lilist">
                            <div class="images_imgposition" :class="{ 'images_checkedactive': checkedactive == index }"
                                @click="changeServeUrl(item, index)">
                                <img :src="image[item.cnname]" alt="">
                            </div>
                            <div class="images_onlineimageName" :title="zh[item.cnname]"> {{ zh[item.cnname] ?? item.cnname }}</div>
                        </div>
                    </div>

                <el-form-item label="地理范围" v-if="props.type == 'terrain'">
                    <div class="rectangle">
                        <el-input v-model="formData.rectangle[0]" type="number" />
                        <el-input v-model="formData.rectangle[1]" type="number" />
                        <el-input v-model="formData.rectangle[2]" type="number" />
                        <el-input v-model="formData.rectangle[3]" type="number" />
                    </div>
                </el-form-item>
            </el-form>

        </template>
    </DialogCom>
</template>
<script setup lang="ts">
import { getImageListurl } from "@/api/baseSceneConfigApi";
import DialogCom from "@/components/common/DialogCom.vue";
import transform from '@/scripts/baseSceneConfig/imageryLocale';
import { defineEmits, onMounted, ref } from "vue";


const props = defineProps({
    isVisible: {
        type: Boolean,
        default: false,
    },
    close: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: "",
    },
    type: {
        type: String,
        default: "",
    }
});
const emits = defineEmits(["close", "confirm"]);

const ruleFormRef = ref<any>('')

const imagelist = ref()

const checkedactive = ref()

const { zh, image }: any = transform

const formData = ref({
    name: "",
    url: "",
    rectangle: [-180, -90, 180, 90],
    type: props.type,
    maximumLevel: 18,
    isShowTk: "",
    tokenValue:""

})

const rules = ref({
    // name: [{ required: true, message: '请输入名称', trigger: 'change' }],
    url: [{ required: true, message: '请输入服务地址', trigger: 'change' }],
    tokenValue: [{ required: true, message: `请输入token`, trigger: 'change' }],
})



const changeServeUrl = (item: any, index: number) => {
    formData.value.url = item.url
    formData.value.name = zh[item.cnname] ? zh[item.cnname] : item.cnname
    checkedactive.value = index
    formData.value.isShowTk = item.requireField
    console.log("formData",formData.value);

}

// 关闭按钮
const close = () => {
    emits('close')
}
// 确认
const confirm = async () => {
    ruleFormRef.value.validate((valid:any) => {
        console.log("valid",valid);
        
        formData.value.rectangle = formData.value.rectangle.map(item => item ? item : 0)
        if (valid) {
            const data = {
                ...formData.value,
            }
            emits('confirm', data)
        }
    })

}

onMounted(async () => {
    imagelist.value = await getImageListurl()
    console.log("imagelist.value", imagelist.value);
})


</script>

<style scoped>
.app-input {
    width: 78%;
}

.el-button {
    background: var(--primary-blue-color);
    color: white;
    width: 66px;
}

.avatar-uploader .avatar {
    width: 130px;
    height: 130px;
    display: block;
}

.zoom,
.condition {
    width: 438px;
    display: flex;
    justify-content: space-around;
}

.zoom .el-input {
    width: 200px;
}

.condition .el-input,
.condition .el-select {
    width: 100px;
}

:deep(.el-dialog) {
    width: 460px;
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.file {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
}

#editor-content {
    width: 100%;
    background-color: #1e1e1e;
}

.rectangle {
    display: flex;
}

.images_img_list {
    height: 185px;
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
    overflow-y: auto;
}

.images_img_lilist {
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.images_imgposition{
    box-sizing: border-box;
    width: 64px;
    height: 64px;
}
.images_imgposition>img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.images_onlineimageName {
    width: 64px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.images_imgposition:hover {
  border: 2px solid rgba(44, 104, 247, 1);
}

.images_checkedactive {
  border: 2px solid rgba(44, 104, 247, 1);
}
</style>